import React, { Component } from "react";
import { observer } from "mobx-react";
import {toJS} from 'mobx';
import { withRouter } from 'react-router-dom';
import { Icon, Tools } from "weaver-mobile";
import { RouteLayout, MapPage, ListViewPage} from "weaver-mobile-page";
import TitlePage from '../../coms/TitlePage';
import classnames from 'classnames';
const Normal = MapPage.Normal;
const getLabel = Tools.getLabel;
let map;

@withRouter
@observer
export default class SearchNearBy extends Component {
    constructor(props){
        super(props);
    }

    mapEvents = {
        created: instance => this.setMapInstance(instance)
    };

    setMapInstance = instance => {
        if (instance.CLASS_NAME === "AMap.Map") {
            map = instance;
            
            const params = this.props.location.state;
            const position = {
                longitude: params != null ? params.longitude : null,
                latitude: params != null ? params.latitude : null
            }

            this.initMarker(position);
        }
    }

    initMarker = position => {
        const {longitude, latitude} = position;
        if(map != null && longitude != null){
            const position = [longitude, latitude];
            let overlays = map.getAllOverlays("marker");
            let marker;
            if(overlays.length == 0){
                marker = new window.AMap.Marker({
                    position: position,
                });
                map.add(marker);
            }else{
                marker = overlays[0];
                marker.setPosition(position);
            }
            try{
                setTimeout(() => map.setCenter(position), 20);    
            }catch(e){
                setTimeout(() => map.setCenter(position), 20);
            }
        }else{

        }
    }

    changeLocation = d => {
        this.initMarker(d);
    }

    getTemplate = (template) => {
        const {store: {nearList, selectedNearIndex, setSelectedNearIndex, changeLocation, refreshNearData, setNearCurrentPage, nearListViewStore}} = this.props;
        return {
            ...template,
            default: [{
                key: 'col1',
                render: (data) => { 
                        const clz = classnames({
                            selected: true,
                            selected_hide: (data.id != selectedNearIndex)
                        })
                        return (
                            <div key={`near-${data.id}`} className='item' onClick={() => setSelectedNearIndex(data.id, this.changeLocation)}>
                                <div className='info'>
                        <div className='name text-elli'>{data.name}</div>
                                    <div className='address text-elli'>{data.address}</div>
                                </div>
                                <div id={data.id} className={clz}>
                                    <Icon type='check' size='xs' color='#55B1F9'/>
                                </div>
                            </div>
                        )
                },
              }]
        }
    }

    render() {
        const {store: {nearList, selectedNearIndex, setSelectedNearIndex, changeLocation, refreshNearData, setNearCurrentPage, nearListViewStore}} = this.props;

        const { loading, hasMore } = nearListViewStore;

        const mapProps = {
            showIntroduction: false,
            dragEnable: false,
            events: this.mapEvents,
            children: <div />
        }
        const dataLength = toJS(nearListViewStore.data).length;

        const listViewPageProps = {
            style: {
                height: '100%'
            },
            store: nearListViewStore,
            onRefresh: () => refreshNearData(),
            onEndReached: () => setNearCurrentPage(),
            renderFooter: () => {
                if (loading) {
                    return (
                    <div style={{ padding: 30, textAlign: 'center' }}>
                        Loading...
                    </div>
                    );
                } else if (!hasMore) {
                    return (
                    <div className='nomore'>
                        <span className='left' />
                        <span className='name'>{getLabel(390064, '没有更多啦')}</span>
                        <span className='right' />
                    </div>
                    );
                }
                return null;
            }
        }

        return (
            <RouteLayout> 
                <div className='wm-route-layout'>
                    <TitlePage title={getLabel('504543','附近位置')}>
                        <div className='searchNearBy'>
                            <div className='map'>
                                <Normal {...mapProps} />
                            </div>
                            <div className='list'>
                                {<ListViewPage.Normal {...listViewPageProps} getTemplate={this.getTemplate} />}
                            </div>
                            <div className='btn' onClick={() => changeLocation(() => this.props.history.go(-1))}>{getLabel('826','确定')}</div>
                        </div>
                    </TitlePage>
                </div>
            </RouteLayout>
        )
    }
}